<template>
    <div class="br-main">
        <p class="titleTip">币种充值</p>
        <div class="coinnBox">
            <div v-for="(item, i) in coinArr" :key="i" class="coinItem" :class="{selectCoin: coin==item.name}" @click="selectCoin(item.name)">
                <p>{{item.name}}</p>
            </div>
        </div>
        <p class="titleTip">选择支付通道</p>
        <div class="paymentChannel1">
            <div class="paymentChannel1-list">
                <div v-for="(item, i) in paymentChannel1Arr" :key="i" class="paymentChannel1-item" :class="{selectPC: paymentChannel1==item.name}" @click="selectPC(item.name)">
                    <p>{{item.name}}</p>
                </div>
            </div>
            <div class="paymentChannel1-QRCode">
                <div class="qrCode"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return{
            coinArr: [
                {name: 'USDT', id: 1},
                {name: 'USDC', id: 2},
                {name: 'ETH', id: 3},
                {name: 'TRX', id: 4}
            ],
            coin: 'USDT',
            paymentChannel1Arr: [
                {name: 'TRC20', id: 1},
                {name: 'ERC20', id: 2}
            ],
            paymentChannel1: 'TRC20'
        }
    },
    methods:{
        selectCoin(name) {
            this.coin = name
        },
        selectPC(name) {
            this.paymentChannel1 = name
        }
    }
}
</script>

<style lang="less" scoped>
.br-main{
    width: 6.6rem;
    .titleTip{
        color: #625F5F;
        font-size: .28rem;
        margin-top: .44rem;
        margin-bottom: .2rem;
    }
    .coinnBox{
        width: 100%;
        height: 1.4rem;
        border-radius: .4rem;
        padding: .32rem;
        background-color: #FFFFFF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .coinItem{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.4rem;
            height: .6rem;
            color: #979797;
            background-color: #F4F4F4;
            border-radius: .3rem;
        }
        .selectCoin{
            color: #FFFFFF;
            background-color: #713FF5;
        }
    }
    .paymentChannel1{
        width: 100%;
        height: 4.4rem;
        padding: .32rem;
        background-color: #FFFFFF;
        border-radius: .4rem;
        .paymentChannel1-list{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .paymentChannel1-item{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 1.4rem;
                height: .6rem;
                color: #979797;
                background-color: #F4F4F4;
                border-radius: .3rem;
                margin-right: .3rem;
            }
            .selectPC{
                color: #FFFFFF;
                background-color: #713FF5;
            }
        }
        .paymentChannel1-QRCode{
            width: 100%;
            height: 3.1rem;
            margin-top: .2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            .qrCode{
                width: 3.1rem;
                height: 3.1rem;
                background-color: #625F5F;
            }
        }
    }
}
</style>